<template>
    <div class="order-container">
        <!-- 顶部选项卡 -->
        <div class="tab-container">
            <div v-for="(tab, index) in tabs" :key="index" class="tab-item"
                :class="{ active: query.audit === tab.value }" @click="switchTab(tab.value)">
                {{ tab.name }}
            </div>
        </div>

        <!-- 订单列表 -->
        <div class="order-list">
            <!-- 时代灯饰订单 -->
            <div class="order-item" v-for="item in orderList" :key="item.id">
                <div class="order-header">
                    <div class="store-info">
                        <img :src="item.brand?.logo_url"
                            style="width: 120rpx; height: 120rpx;object-fit: cover;border-radius: 50%;"
                            mode="fill"></img>
                    </div>
                    <div style="flex: 1;">
                        <div class="store-box">
                            <div class="store-name">{{ item.brand?.name || '' }}</div>
                            <div class="store-next">
                                <view :style="{ color: getStatusName(item.audit).color }">
                                    {{ getStatusName(item.audit).name }}</view>
                            </div>
                        </div>
                        <div class="store-label">
                            <div>{{ item.create_time || "" }}</div>
                            <div>申请区域：{{ item?.area_detail || "" }}</div>
                        </div>
                    </div>
                </div>

                <!-- 订单总结 -->
                <div class="order-footer">
                    <div class="order-actions">
                        <button class="action-btn" @click="sendApplyOpen(item, 'edit')" v-if="item.audit !== 1">
                            编辑
                        </button>
                        <button class="action-btn del-btn" @click="sendApplyOpen(item, 'del')">
                            删除
                        </button>
                    </div>
                </div>
            </div>
            <div v-if="orderList.length === 0" class="empty-order">
                <gui-image
                    src="https://cdn.duyumy.com/accessory/0fe61301ec884459440a85e2fcd72d1ae98c46da.png"></gui-image>
                <div style="font-size: 28rpx; color: #999; margin-top: -20rpx">
                    暂无数据~
                </div>
            </div>
            <div class="footEmpty"></div>
        </div>
        <div class="footer">
            <button class="add-btn" @click="sendApplyOpen(item)">+ 申请品牌授权</button>
        </div>
    </div>
</template>

<script setup>
import {
    ref,
    reactive
} from "vue";
import {
    getbrandApplyList,
    delbrandApply
} from "@/api/brandApply";
import {
    onShow,
} from "@dcloudio/uni-app";
import {
    showToast
} from "@/utils/helper";
// 选项卡数据
const tabs = [
    {
        name: "全部",
        value: '',
        class: "all",
    },
    {
        name: "待审核",
        value: 0,
        class: "nopay",
    },
    {
        name: "审核通过",
        value: 1,
        class: "waitSend",
    },
    {
        name: "审核不通过",
        value: 2,
        class: "waitReceive",
    },
];

const query = reactive({
    page: 1,
    limit: 99,
    audit: '',
});
// 切换选项卡
const switchTab = (value) => {
    query.audit = value;
    getApplyListData();
};
const orderList = ref([]);
const getApplyListData = async () => {
    const {
        data
    } = await getbrandApplyList(query);
    orderList.value = data;
};
const typeAction = ref(null);
const sendApplyOpen = (item, type = "add") => {
    typeAction.value = type;
    switch (type) {
        case 'add':
            uni.navigateTo({
                url: `/pages/brandApply/setAreaBrand`
            });
            break;
        case 'edit':
            uni.navigateTo({
                url: `/pages/brandApply/setAreaBrand?item=${JSON.stringify(item)}`
            });
            break;
        case 'del':
            uni.showModal({
                title: '提示',
                content: '确定删除该品牌授权记录吗？',
                success: async (res) => {
                    if (res.confirm) {
                        const res = await delbrandApply({
                            id: item.id
                        })
                        showToast('删除成功')
                        getApplyListData()
                    }
                }
            });
            break;
    }
};


const getStatusName = (status) => {
    switch (status) {
        case 0:
            return {
                color: '#3399ff',
                name: '待审核'
            };
        case 1:
            return {
                color: '#7cbc18',
                name: '审核通过'
            };
        case 2:
            return {
                color: '#ff4d4f',
                name: '审核不通过'
            };
        default:
            return {
                color: '#ff1111',
                name: '未知'
            };
    }
}
onShow(() => {
    getApplyListData();
});
</script>

<style scoped>
.order-container {
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 选项卡样式 */
.tab-container {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #333;
    position: relative;
    white-space: nowrap;
}

.tab-item.active {
    color: #1989fa;
}

.tab-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background-color: #1989fa;
}

/* 订单列表样式 */
.order-list {
    padding: 20rpx;
}

.order-item {
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
}

.order-header {
    display: flex;
    gap: 20rpx;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px solid #f5f5f5;
}

.store-box {
    display: flex;
    justify-content: space-between;
}

.store-info {
    display: flex;
    align-items: center;
}

.store-icon {
    margin-right: 10rpx;
    font-size: 32rpx;
}

.store-name {
    font-size: 28rpx;
    margin-bottom: 10rpx;
}

.store-label {
    font-size: 28rpx;
    color: #858585;
    display: flex;
    gap: 20rpx;
    flex-direction: column;
}

.store-next {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.order-status {
    font-size: 24rpx;
}

/* 商品列表样式 */
.product-list {
    padding: 0 20rpx;
}

.product-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
}

.product-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
}

.product-name {
    font-size: 28rpx;
    color: #333;
}

.product-quantity {
    font-size: 28rpx;
    color: #999;
}

.product-spec {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 10rpx;
}

.product-price {
    font-size: 28rpx;
    color: #ff4d4f;
}

/* 订单底部样式 */
.order-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20rpx;
}

.order-total {
    font-size: 26rpx;
    color: #333;
    text-align: right;
}

.order-actions {
    display: flex;
}

.action-btn {
    margin-left: 20rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    border: 1px solid #6cb4fe;
    background-color: #fff;
    color: #409eff;
    border-color: #409eff;
}

.del-btn {
    border: 1px solid #ff4d4f;
    background-color: #fff;
    color: #ff4d4f;
    border-color: #ff4d4f;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20rpx 0;
    background-color: #1989fa;
}

.add-btn {
    width: 100%;
    height: 63rpx;
    line-height: 44rpx;
    background-color: #1989fa;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
}

button::after {
    border: none;
}

.footEmpty {
    height: 112rpx;
    width: 100%;
}

.empty-order {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    flex-direction: column;
}
</style>